<template>
  <view class="wh_750 flex flex-column align-center bg_F5F5F5 pageHeight">
    <s-header-title ref="headerTitle" isDisplayBack :title="page.options.name + '纪念堂动态详情'" is-fixed
                  background="#FFFFFF"
                  @getPageHeight="getPageHeight" zIndex="10">
    </s-header-title>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <view class="wh_750 flex justify-around align-center tabsEdit">
      <su-tabs :list="page.editList"
               :current="page.options.index"
               :scrollable="false"
               @change="change"
               bgColor="#FFFFFF"
               active-color="#FF4206"
               inactive-color="#292929"
               font-size="36"
               duration="0.1"
               lineColor="#FF4206"
               :activeStyle="{
               color: '#FF4206',
               'font-size': '36rpx',
               'font-weight': '500',
             }"
               :inactiveStyle="{
               color: '#292929',
               'font-size': '36rpx',
               'font-weight': '500',
             }"
               :itemStyle="{
               'width': '100rpx',
               'height': '113rpx',
             }"
      ></su-tabs>
    </view>
    <!-- 爱心列表 -->
    <scroll-view :scroll-y="true" :style="{
      height: `calc(100vh - ${page.headerHeight + 113}px)`
    }" v-if="page.options.index == 0" @scrolltolower="loveScrolltolower">
      <view class="flex flex-column align-center wh_750">
        <view class="loveList" v-for="(item,index) in listInfo.loveList" :key="index">
          <view class="hW_25"></view>
          <view class="list flex align-center justify-between">
            <view class="title ml_25">
              {{ `${item.username}点了爱心` }}
            </view>
            <view class="content">
              {{ `爱心+${item.num}` }}
            </view>
            <view class="time mr_25">
              {{ dayjs(item.update_time).format('YYYY年MM月DD HH:mm:ss') }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 献花列表 -->
    <scroll-view :scroll-y="true" :style="{
      height: `calc(100vh - ${page.headerHeight + 113}px)`
    }" v-if="page.options.index == 1" @scrolltolower="flowersScrolltolower">
      <view class="flex flex-column align-center w-full">
        <view class="presentABouquetList" v-for="(item,index) in listInfo.flowersList" :key="index">
          <view class="hW_25"></view>
          <view class="list flex align-center justify-between">
            <view class="left flex align-center ml_25">
              <image-avater :src="item.avatar.indexOf('http') != -1 ? item.avatar : `${nc_image}${item.avatar}`"
                            width="60" height="60"></image-avater>
              <view class="description flex flex-column ml-10">
                <view class="name">{{ `${item.username}献了${item.name}` }}</view>
                <view class="time">{{ dayjs(item.add_time).format('YYYY年MM月DD日') }}</view>
              </view>
            </view>
            <view class="right mr_25">
              {{ item.minute > 0 ? `剩余时长${item.minute}分钟` : '已结束' }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <scroll-view :scroll-y="true" :style="{
      height: `calc(100vh - ${page.headerHeight + 113}px)`
    }" v-if="page.options.index == 2" @scrolltolower="flowersScrolltolower">
      <view class="flex flex-column align-center w-full">
        <view class="presentABouquetList" v-for="(item,index) in listInfo.articlesList" :key="index">
          <view class="hW_25"></view>
          <view class="list flex align-center justify-between">
            <view class="left flex align-center ml_25">
              <image-avater :src="item.avatar.indexOf('http') != -1 ? item.avatar : `${nc_image}${item.avatar}`"
                            width="60" height="60"></image-avater>
              <view class="description flex flex-column ml-10">
                <view class="name">{{ `${item.username}献了${item.name}` }}</view>
                <view class="time">{{ dayjs(item.add_time).format('YYYY年MM月DD日') }}</view>
              </view>
            </view>
            <view class="right mr_25">
              {{ item.minute > 0 ? `剩余时长${item.minute}分钟` : '已结束' }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 留言列表 -->
    <scroll-view :scroll-y="true" :style="{
      height: `calc(100vh - ${page.headerHeight + 113}px)`
    }" v-if="page.options.index == 3" @scrolltolower="leaveAMessageScrolltolower">
      <view class="flex flex-column align-center w-full">
        <view class="leaveAMessageList" v-for="(item,index) in listInfo.leaveAMessageList">
          <view class="hW_25"></view>
          <view class="list flex align-center justify-between">
            <image-avater :src="item.avatar.indexOf('http')!= -1 ? item.avatar : `${nc_image}${item.avatar}`" width="60"
                          height="60" class="ml_25"></image-avater>
            <view class="left flex flex-column">
              <view class="description ml_10">
                <view class="fs_30 fw_500 color_4B4B4B">{{ `${item.username}留言: ` }}</view>
                <view class="fs_30 fw_500 color_4B4B4B ml_35">{{ item.content }}</view>
              </view>
              <!--              <view class="flex justify-end align-center description mr_25">-->
              <!--                {{ dayjs(item.add_time).format('YYYY年MM月DD HH:mm:ss') }}-->
              <!--                <view class="tips ml_35">-->
              <!--                  &lt;!&ndash;                  {{ '删除' }}&ndash;&gt;-->
              <!--                </view>-->
              <!--              </view>-->
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="leaveAMessageInput flex align-center justify-center" v-if="page.options.index == 3" :style="{
      paddingTop:'20rpx',
      paddingBottom:'env(safe-area-inset-bottom)'
    }">
      <view class="flex align-center justify-center w-full">
        <view class="left">
          <input v-model="listInfo.leaveAMessage" type="text" placeholder="请输入留言" placeholder-style="color:#999999"
                 @input="leaveAMessageInput" @blur="leaveAMessageBlur"></input>
        </view>
        <view class="right flex align-center justify-center" :style="{
          background:listInfo.leaveAMessage.length > 0 ? '#FF4206':'#9F9F9F'
        }" @click.stop="debounce(completeLeaveAMessage,1500,true)">
          完成
        </view>
      </view>
    </view>

    <view class="altarLampThatBurnsDayAndNight" v-if="page.options.index == 4">
      <view class="header flex flex-column align-center justify-center">
        <view class="bg flex align-center justify-center">
          {{ eternalLightTime }}
        </view>
        <view class="description mt_10">
          长明灯剩余时长
        </view>
      </view>
      <scroll-view :scroll-y="true" :style="{
      height: `calc(100vh - ${page.headerHeight + 113}px - 155rpx)`
    }" @scrolltolower="lampScrolltolower">
        <view class="flex flex-column align-center w-full">
          <view class="presentABouquetList" v-for="(item,index) in listInfo.lampList" :key="index">
            <view class="hW_25"></view>
            <view class="list flex items-center justify-between">
              <view class="left flex items-center">
                <image-avater :src="item.avatar" width="60" height="60"></image-avater>
                <view class="description flex flex-column ml_10">
                  <view class="name">{{ `${item.username}点亮了长明灯` }}</view>
                  <view class="time">{{ dayjs(item.add_time).format('YYYY年MM月DD HH:mm:ss') }}</view>
                </view>
              </view>
              <view class="right">
                增加{{ item.minute }}分钟
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  import HeaderTitle from '@/pages/genealogy/components/headerTitle.vue';
  import { computed, nextTick, onMounted, reactive } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import dayjs from 'dayjs';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import debounce from '@/sheep/helper/debounce';
  import sheep from '@/sheep';

  const page = reactive({
    options: {
      index: 0,
    },
    headerHeight: 0,
    editList: [
      {
        name: '爱心',
      },
      {
        name: '献花',
      },
      {
        name: '贡品',
      },
      {
        name: '留言',

      },
      {
        name: '长明灯',
      },
    ],
    time: null,
  });
  const listInfo = reactive({
    loveList: [],
    flowersList: [],
    articlesList:[],
    leaveAMessageList: [],
    leaveAMessage: '',
    lampList: [],
    lampTime: 0,
    leaveAMessageParams: {
      ancestral_id: '', page: 1, pagesize: 20, total: 0,
    },
    loveParams: {
      ancestral_id: '', page: 1, pagesize: 20, total: 0,
    },
    articlesParams: {
      ancestral_id: '', page: 1, pagesize: 20, total: 0,
    },
    lampParams: {
      ancestral_id: '', page: 1, pagesize: 20, total: 0,
    },
    flowersParams: {
      ancestral_id: '', page: 1, pagesize: 20, total: 0,
    },
  });

  const eternalLightTime = computed(() => {
    if (listInfo.lampTime > 0) {
      let s = listInfo.lampTime % 60;
      let m = Math.floor(listInfo.lampTime / 60) % 60;
      let h = Math.floor(listInfo.lampTime / 60 / 60);
      if (h < 10) {
        h = `0${h}`;
      }
      if (m < 10) {
        m = `0${m}`;
      }
      if (s < 10) {
        s = `0${s}`;
      }
      return `${h}:${m}:${s}`;
    } else {
      return '00:00:00';
    }
  });
  const systemInfo = computed(() => sheep.$platform.device);
  const nc_image = computed(() => sheep.$store('AI').nc_image);

  onLoad((options) => {
    page.options = options;
    if (!page.options.index) {
      page.options.index = 0;
    }
    listInfo.leaveAMessageParams.ancestral_id = options.id;
    listInfo.loveParams.ancestral_id = options.id;
    listInfo.articlesParams.ancestral_id = options.id;
    listInfo.lampParams.ancestral_id = options.id;
    listInfo.flowersParams.ancestral_id = options.id;
  });

  onMounted(async () => {
    await getLeaveAMessageList();
    await getLoveList();
    await getLampList();
    await getFlowersList();
    await getArticlesList();
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function change(e) {
    console.log('change', e.index);
    page.options.index = e.index;
    switch (e.index) {
      case 3:
        listInfo.leaveAMessageList = [];
        listInfo.leaveAMessageParams.page = 1;
        await getLeaveAMessageList();
        break;
      case 0:
        listInfo.loveList = [];
        listInfo.loveParams.page = 1;
        await getLoveList();
        break;
      case 4:
        listInfo.lampList = [];
        listInfo.lampParams.page = 1;
        await getLampList();
        break;
      case 1:
        listInfo.flowersList = [];
        listInfo.flowersParams.page = 1;
        await getFlowersList();
        break;
      case 2:
        listInfo.articlesList = [];
        listInfo.articlesParams.page = 1;
        await getArticlesList();
        break;
    }
  }

  // 发送留言
  async function completeLeaveAMessage() {
    if (!!page.options.family_id) {
      const { code, msg } = await sheep.$api.family.checkAuth({
        family_id: page.options.family_id,
        action: 'add',
      });
      if (code != 1) {
        sheep.$helper.toast(msg)
        return;
      }
      if (listInfo.leaveAMessage.length > 0) {
        let { status, msg } = await sheep.$api.genealogy.leaving_message({
          ancestral_id: page.options.id,
          content: listInfo.leaveAMessage,
        });
        listInfo.leaveAMessage = '';
        listInfo.leaveAMessageList = [];
        listInfo.leaveAMessageParams.page = 1;
        await getLeaveAMessageList();
      } else {
        sheep.$helper.toast('请输入留言内容');
      }
    } else if (!!page.options.genealogy_id) {
      const { code, msg } = await sheep.$api.genealogy.checkAuth({
        genealogy_id: page.options.genealogy_id,
        action: 'add',
      });
      if (code != 1) {
        sheep.$helper.toast(msg)
        return;
      }
      if (listInfo.leaveAMessage.length > 0) {
        let { status, msg } = await sheep.$api.genealogy.leaving_message({
          ancestral_id: page.options.id,
          content: listInfo.leaveAMessage,
        });
        listInfo.leaveAMessage = '';
        listInfo.leaveAMessageList = [];
        listInfo.leaveAMessageParams.page = 1;
        await getLeaveAMessageList();
      } else {
        sheep.$helper.toast('请输入留言内容');
      }
    } else {
      if (listInfo.leaveAMessage.length > 0) {
        let { status, msg } = await sheep.$api.genealogy.leaving_message({
          ancestral_id: page.options.id,
          content: listInfo.leaveAMessage,
        });
        listInfo.leaveAMessage = '';
        listInfo.leaveAMessageList = [];
        listInfo.leaveAMessageParams.page = 1;
        await getLeaveAMessageList();
      } else {
        sheep.$helper.toast('请输入留言内容');
      }
    }


  }

  // 获取留言列表
  async function getLeaveAMessageList() {
    let { data } = await sheep.$api.genealogy.get_leaving_messages(listInfo.leaveAMessageParams);
    data.data.forEach(item => {
      listInfo.leaveAMessageList.push(item);
    });
    listInfo.leaveAMessageParams.total = data.total;
  }

  async function leaveAMessageScrolltolower() {
    if (listInfo.leaveAMessageParams.page * listInfo.leaveAMessageParams.pagesize < listInfo.leaveAMessageParams.total) {
      listInfo.leaveAMessageParams.page = listInfo.leaveAMessageParams.page + 1;
      await getLeaveAMessageList();
    }
  }

  // 获取爱心接口
  async function getLoveList() {
    let { data } = await sheep.$api.genealogy.getClickLoveRecord(listInfo.loveParams);
    data.data.forEach(item => {
      listInfo.loveList.push(item);
    });
    listInfo.loveParams.total = data.total;
  }

  // 获取贡品接口
  async function getArticlesList() {
    let { data } = await sheep.$api.genealogy.getTributeRecord(listInfo.articlesParams);
    data.data.forEach(item => {
      listInfo.articlesList.push(item);
    });
    listInfo.articlesParams.total = data.total;
  }

  async function loveScrolltolower() {
    if (listInfo.loveParams.page * listInfo.loveParams.pagesize < listInfo.loveParams.total) {
      listInfo.loveParams.page = listInfo.loveParams.page + 1;
      await getLoveList();
    }
  }

  // 获取长明灯列表
  async function getLampList() {
    let { data } = await sheep.$api.genealogy.getLampRecord(listInfo.lampParams);
    console.log(data);
    data.list.data.forEach(item => {
      listInfo.lampList.push(item);
    });
    listInfo.lampParams.total = data.list.total;
    listInfo.lampTime = data.over_time;
    nextTick(() => {
      if (!!page.time) {
        clearInterval(page.time);
      }
      page.time = setInterval(() => {
        listInfo.lampTime = listInfo.lampTime - 1;
        if (this.lampTime <= 0) {
          clearInterval(page.time);
        }
      }, 1000);
    });
  }

  async function lampScrolltolower() {
    if (listInfo.lampParams.page * listInfo.lampParams.pagesize < listInfo.lampParams.total) {
      listInfo.lampParams.page = listInfo.lampParams.page + 1;
      await getLampList();
    }
  }

  async function getFlowersList() {
    let { data } = await sheep.$api.genealogy.getGiftRecord(listInfo.flowersParams);
    data.data.forEach(item => {
      listInfo.flowersList.push(item);
    });
    listInfo.flowersParams.total = data.total;
  }

  async function flowersScrolltolower() {
    if (listInfo.flowersParams.page * listInfo.flowersParams.pagesize < listInfo.flowersParams.total) {
      listInfo.flowersParams.page = listInfo.flowersParams.page + 1;
      await getFlowersList();
    }
  }
</script>


<style scoped lang="scss">
  .tabsEdit {
    width: 750rpx;
    height: 113rpx;
    background: #FFFFFF;

    ::v-deep .u-tabs {
      height: 113rpx;
    }
  }

  .loveList {
    width: 702rpx;

    .list {
      width: 702rpx;
      height: 80rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 20rpx 0;

      .title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 27rpx;
        color: #292929;
      }

      .content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 27rpx;
        color: #292929;
      }

      .time {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 22rpx;
        color: #696969;
      }
    }
  }

  .presentABouquetList {
    width: 702rpx;

    .list {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 20rpx 0;

      .left {
        .description {
          .name {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 27rpx;
            color: #292929;
          }

          .time {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #696969;
          }
        }
      }

      .right {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #696969;
      }
    }
  }

  .leaveAMessageList {
    width: 702rpx;

    .list {
      width: 702rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      padding: 20rpx 0;

      .left {
        .description {
          width: 600rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #4B4B4B;

          text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 27rpx;
            color: #292929;
          }

          .tips {
            width: 44rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #A0A0A0;
          }
        }

      }
    }
  }

  .altarLampThatBurnsDayAndNight {
    .header {
      height: 155rpx;

      .bg {
        width: 278rpx;
        height: 62rpx;
        background: url($uni-bg-url + "/citang_titlebg.png") no-repeat;
        background-size: 100% 100%;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
      }

      .description {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #A7752A;
      }
    }
  }

  .leaveAMessageInput {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 750rpx;
    background: #FFFFFF;

    .left {
      padding: 20rpx 20rpx;
      width: 577rpx;
      background: #F8F8F8;
      border-radius: 40rpx 40rpx 40rpx 40rpx;

      .leaveAMessage_text {
        ::v-deep .u-input__textarea {
          min-height: 80rpx !important;
        }
      }
    }

    .right {
      width: 115rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 23rpx;
      color: #FFFFFF;
    }
  }
</style>
